<template>
    <Card style="margin-left:-15px;margin-right:-15px;">
        <p slot="title">基本信息</p>
        <i-button slot="extra" type="primary" @click="handleRestart">重启门禁</i-button>
        <div class="hr-device-detail">
            <Alert type="error" v-show="error">
                获取设备信息失败
                <i-button class="margin-left-10" size="small" @click="handleSearch">刷新</i-button>
            </Alert>
            <Row :gutter="40" v-show="!error" type="flex">
                <Spin v-if="loading" fix></Spin>
                <i-col span="8" class="device-info__border">
                    <h3 class="device-info__title">
                        基本信息
                        <i-button @click="handleSearch" size="small">刷新</i-button>
                    </h3>
                    <kv-wrap
                        label-width="auto"
                        fontColor="#000"
                        align="right"
                        padding="10px 0"
                        fontWeight="400"
                        fontSize="14px">
                        <kv-item label="名称:">
                            {{device.description || device.name || '无'}}
                            <i-button class="margin-left-10" size="small" type="primary" @click="handleRename(device.description || device.name)">修改</i-button>
                        </kv-item>
                        <kv-item label="序列号:">
                            {{device.sn || (device.hardware_info && device.hardware_info.sn)}}
                        </kv-item>
                        <kv-item label="uuid:">
                            {{device.uuid}}
                        </kv-item>
                        <kv-item label="状态:">
                            <span>{{device.is_online ? '在线' : '离线'}}</span>
                            ({{device.last_active_time | date}})
                        </kv-item>
                        <kv-item label="型号:">
                            {{device.type}}
                        </kv-item>
                        <kv-item label="门禁类型:">
                            {{device.face_access_type}}
                        </kv-item>
                        <kv-item label="所属楼栋:">
                            {{device.building_name}}
                        </kv-item>
                        <kv-item label="IP:">
                            {{device.ip}}
                        </kv-item>
                        <kv-item label="用户最大容量:">
                            {{device.user_count_max || 0}}
                        </kv-item>
                        <kv-item label="用户未使用容量:">
                            {{(device.user_count_max || 0 ) - (device.user_count || 0)}}
                        </kv-item>
                        <kv-item label="未关门预警时长:">
                            {{device.door_detector_time === '' ? '未设置' : device.door_detector_time + '秒' }}
                        </kv-item>
                        <kv-item label="首次注册时间:">
                            {{device.reg_time | date}}
                        </kv-item>
                        <kv-item label="绑定时间:">
                            {{device.bind_time | date}}
                        </kv-item>
                    </kv-wrap>
                </i-col>

                <i-col span="8" class="device-info__border">
                    <h3 class="device-info__title">保修信息</h3>
                    <kv-wrap
                        label-width="auto"
                        fontColor="#000"
                        align="left"
                        fontWeight="400"
                        padding="10px 0"
                        fontSize="14px">
                        <kv-item label="设备交付时间:">
                            {{device.bill_time | date}}
                        </kv-item>
                        <kv-item label="保修起始时间:">
                            {{device.guarantee_begin}}
                        </kv-item>
                        <kv-item label="保修截止时间:">
                            {{device.guarantee_end}}
                        </kv-item>
                    </kv-wrap>
                </i-col>

                <i-col span="8" v-if="device.versions">
                    <h3 class="device-info__title">硬件信息</h3>
                    <kv-wrap
                        label-width="auto"
                        fontColor="#000"
                        align="left"
                        fontWeight="400"
                        padding="10px 0"
                        fontSize="14px">
                        <kv-item
                            :label="versionMap[key] || key"
                            :key="key" v-for="(item,key) in device.versions">
                            {{item}}
                        </kv-item>
                    </kv-wrap>
                </i-col>
            </Row>
        </div>
    </Card>
</template>

<script>
    import debounce from 'lodash/debounce'
import { InputNumber } from 'iview'; // eslint-disable-line
    import { http, api } from '@/libs/http'
import { refreshRoom } from '../room-list/util'
import { regexEnum } from '@/libs/validate'
/**
 * 远程OTA 要有升级固件 发布到服务器（运维）配置
 */

export default {
      name: 'device-info',
      props: {
        deviceInfo: Object,
        homeId: Number
      },
      created () {
        this.initData()
      },
      data () {
        return {
          counting: false,
          deviceId: this.deviceInfo.id,
          device: {},
          loading: false,
          error: false,
          versionMap: {
            firmware_version: '固件版本',
            push_sdk_version: 'Push SDK版本号'
          },
          timer: null
        }
      },
      methods: {
        handleSearch: debounce(function () {
          this.initData()
        }, 200),
        async initData () {
          try {
            this.error = false
            this.loading = true
            const { room_id, id } = this.deviceInfo
            const device = await http.req(api.face_access_info, [room_id, id], null)
            if (!device.versions) {
              device.versions = {
                firmware_version: device.firmware_version,
                push_sdk_version: device.push_sdk_version
              }
            }
            this.device = device
            // this.initThresholdValue();
          } catch (err) {
            console.log(err)
            this.error = true
          } finally {
            this.loading = false
          }
        },
        handleRename (name) {
          let description = name
          this.$Modal.confirm({
            title: '新名称',
            render: h => <i-input value={description} onInput={ function (val) { return (description = val) } }></i-input>,
            onOk: () => {
              if (description === name) {
                this.$Modal.remove()
              } else if (!regexEnum.legalName.reg.test(description)) {
                this.$Message.info({
                  content: regexEnum.legalName.message,
                  duration: 4
                })
              } else {
                this.renameDevice(description)
              }
            },
            loading: true
          })
        },
        async renameDevice (description) {
          const { roomId, id } = this.deviceInfo
          const res = await http.req(api.device_update, [roomId, id], { description })
          this.$Modal.remove()
          if (res) {
            this.$Message.success('修改成功')
            refreshRoom(this.homeId, roomId, id, description)
            this.initData()
          }
        },
        handleRestart () {
          this.$Modal.confirm({
            loading: true,
            title: '提示',
            content: '确认重启该门禁?',
            onOk: () => {
              this.restart()
            }
          })
        },
        async restart () {
          try {
            const { room_id, id } = this.deviceInfo
            const res = await http.req(api.face_access_restart, [ room_id, id ], null)
            if (res) this.$Message.success('门禁重启成功')
          } catch (err) {
            console.log(err)
          } finally {
            this.$Modal.remove()
          }
        }
      }
    }
</script>

<style>
    .hr-device-detail{
        position: relative;
        padding: 10px 20px;
    }

    .device-info__tools{
        margin-bottom: 20px;
    }

    .device-info__border{
        justify-content: stretch;
        border-right: 1px solid #aaa;
    }

    .device-info__title{
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #000;
    }
</style>